<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务网关架构图 - 优化版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
        }
        .container {
            width: 100%;
            max-width: 1000px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 25px;
            margin-bottom: 30px;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .description {
            text-align: center;
            color: #546e7a;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        .architecture {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .layer {
            display: flex;
            align-items: center;
            border-radius: 8px;
            padding: 15px 20px;
            color: white;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .layer:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .layer-number {
            font-size: 24px;
            font-weight: bold;
            margin-right: 20px;
            min-width: 40px;
            text-align: center;
        }
        .layer-content {
            flex-grow: 1;
        }
        .layer-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .layer-description {
            font-size: 14px;
            opacity: 0.9;
        }
        .layer-modules {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .module {
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
        }
        .arrow {
            text-align: center;
            margin: 10px 0;
            color: #7f8c8d;
        }
        .arrow i {
            font-size: 24px;
        }
        .client-layer, .backend-layer {
            background: #3498db;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            margin: 15px 0;
        }
        .client-layer {
            margin-bottom: 30px;
        }
        .backend-layer {
            margin-top: 30px;
        }
        .controls {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background: #3498db;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .detail-panel {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            display: none;
        }
        .detail-panel h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        .detail-panel p {
            line-height: 1.6;
            color: #546e7a;
        }
        .highlight {
            border: 2px solid #ffeb3b;
            box-shadow: 0 0 15px rgba(255, 235, 59, 0.5);
        }
        @media (max-width: 768px) {
            .layer {
                flex-direction: column;
                text-align: center;
            }
            .layer-number {
                margin-right: 0;
                margin-bottom: 10px;
            }
            .layer-modules {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>服务网关架构图</h1>
        <p class="description">优化后的服务网关架构图，展示了从客户端到后端服务的完整流程，包含六大核心层次</p>
        
        <div class="architecture">
            <div class="client-layer">
                <h2>客户端层</h2>
                <p>Web/移动应用、边缘设备、第三方服务</p>
            </div>
            
            <div class="arrow">
                <i>⬇️</i>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);" onclick="showDetails('foundation')">
                <div class="layer-number">1</div>
                <div class="layer-content">
                    <h3 class="layer-title">基础支撑层</h3>
                    <p class="layer-description">提供网关运行所需的基础功能和支持</p>
                    <div class="layer-modules">
                        <span class="module">核心框架模块</span>
                        <span class="module">配置管理模块</span>
                        <span class="module">模块总线</span>
                    </div>
                </div>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #fb8c00 0%, #ffa726 100%);" onclick="showDetails('communication')">
                <div class="layer-number">2</div>
                <div class="layer-content">
                    <h3 class="layer-title">核心通信层</h3>
                    <p class="layer-description">处理请求的接收、协议转换和路由转发</p>
                    <div class="layer-modules">
                        <span class="module">协议处理模块</span>
                        <span class="module">路由转发模块</span>
                        <span class="module">代理模块</span>
                    </div>
                </div>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #e53935 0%, #ef5350 100%);" onclick="showDetails('security')">
                <div class="layer-number">3</div>
                <div class="layer-content">
                    <h3 class="layer-title">安全保障层</h3>
                    <p class="layer-description">提供身份验证、授权和数据安全功能</p>
                    <div class="layer-modules">
                        <span class="module">身份认证模块</span>
                        <span class="module">权限控制模块</span>
                        <span class="module">数据安全模块</span>
                    </div>
                </div>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #00acc1 0%, #26c6da 100%);" onclick="showDetails('governance')">
                <div class="layer-number">4</div>
                <div class="layer-content">
                    <h3 class="layer-title">服务治理层</h3>
                    <p class="layer-description">管理服务发现、流量控制和负载均衡</p>
                    <div class="layer-modules">
                        <span class="module">服务注册发现</span>
                        <span class="module">流量控制模块</span>
                        <span class="module">负载均衡</span>
                    </div>
                </div>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #8e24aa 0%, #ab47bc 100%);" onclick="showDetails('connection')">
                <div class="layer-number">5</div>
                <div class="layer-content">
                    <h3 class="layer-title">连接状态层</h3>
                    <p class="layer-description">管理连接状态、会话和连接池</p>
                    <div class="layer-modules">
                        <span class="module">会话管理模块</span>
                        <span class="module">连接池模块</span>
                        <span class="module">同步模块</span>
                    </div>
                </div>
            </div>
            
            <div class="layer" style="background: linear-gradient(135deg, #fdd835 0%, #ffee58 100%);" color="black" onclick="showDetails('operations')">
                <div class="layer-number">6</div>
                <div class="layer-content" style="color: #333;">
                    <h3 class="layer-title">运维与扩展层</h3>
                    <p class="layer-description" style="color: #333;">提供监控、日志和扩展功能</p>
                    <div class="layer-modules">
                        <span class="module" style="background: rgba(0, 0, 0, 0.1); color: #333;">监控运维模块</span>
                        <span class="module" style="background: rgba(0, 0, 0, 0.1); color: #333;">扩展适配模块</span>
                    </div>
                </div>
            </div>
            
            <div class="arrow">
                <i>⬇️</i>
            </div>
            
            <div class="backend-layer">
                <h2>后端服务层</h2>
                <p>微服务集群、数据库、第三方API等</p>
            </div>
        </div>
        
        <div class="controls">
            <button onclick="highlightLayer('foundation')">高亮基础层</button>
            <button onclick="highlightLayer('security')">高亮安全层</button>
            <button onclick="resetHighlight()">重置高亮</button>
            <button onclick="showAllDetails()">显示全部详情</button>
        </div>
        
        <div id="detailPanel" class="detail-panel">
            <h3 id="detailTitle">层详细信息</h3>
            <p id="detailContent">点击架构图中的层次查看详细信息</p>
        </div>
    </div>

    <script>
        function showDetails(layer) {
            const detailPanel = document.getElementById('detailPanel');
            const detailTitle = document.getElementById('detailTitle');
            const detailContent = document.getElementById('detailContent');
            
            const details = {
                foundation: {
                    title: "基础支撑层",
                    content: "提供网关运行所需的基础功能和支持，包括核心框架模块、配置管理模块和模块总线。核心框架模块提供网关的基本运行环境；配置管理模块负责网关配置的动态加载和更新；模块总线提供各模块之间的通信机制。"
                },
                communication: {
                    title: "核心通信层",
                    content: "处理请求的接收、协议转换和路由转发。协议处理模块支持HTTP/1.x、HTTP/2、gRPC、WebSocket等多种协议；路由转发模块根据配置规则将请求路由到相应的后端服务；代理模块负责与后端服务建立连接并传输数据。"
                },
                security: {
                    title: "安全保障层",
                    content: "提供身份验证、授权和数据安全功能。身份认证模块支持JWT、OAuth2.0等多种认证方式；权限控制模块实现基于角色的访问控制(RBAC)；数据安全模块提供数据加密、防篡改和防泄漏功能。"
                },
                governance: {
                    title: "服务治理层",
                    content: "管理服务发现、流量控制和负载均衡。服务注册发现模块支持与多种服务注册中心集成；流量控制模块实现限流、熔断和降级功能；负载均衡模块支持多种负载均衡算法。"
                },
                connection: {
                    title: "连接状态层",
                    content: "管理连接状态、会话和连接池。会话管理模块维护用户会话状态；连接池模块管理后端连接，提高性能；同步模块保证分布式环境下状态的一致性。"
                },
                operations: {
                    title: "运维与扩展层",
                    content: "提供监控、日志和扩展功能。监控运维模块提供指标收集、健康检查和性能监控；扩展适配模块支持插件机制，方便功能扩展和定制化开发。"
                }
            };
            
            if (details[layer]) {
                detailTitle.textContent = details[layer].title;
                detailContent.textContent = details[layer].content;
                detailPanel.style.display = 'block';
                
                // 滚动到详情面板
                detailPanel.scrollIntoView({ behavior: 'smooth' });
            }
        }
        
        function highlightLayer(layer) {
            resetHighlight();
            
            const layers = document.querySelectorAll('.layer');
            layers.forEach(layer => {
                layer.classList.remove('highlight');
            });
            
            // 在实际应用中，这里应该根据layer参数高亮对应的层
            // 简化实现：高亮第一个层
            if (layer === 'foundation') {
                layers[0].classList.add('highlight');
            } else if (layer === 'security') {
                layers[2].classList.add('highlight');
            }
        }
        
        function resetHighlight() {
            const layers = document.querySelectorAll('.layer');
            layers.forEach(layer => {
                layer.classList.remove('highlight');
            });
        }
        
        function showAllDetails() {
            const detailPanel = document.getElementById('detailPanel');
            const detailTitle = document.getElementById('detailTitle');
            const detailContent = document.getElementById('detailContent');
            
            detailTitle.textContent = "服务网关架构完整说明";
            detailContent.innerHTML = `
                <p><strong>服务网关</strong>是微服务架构中的关键组件，作为所有客户端请求的统一入口，提供路由、过滤、安全、监控等功能。</p>
                <br>
                <p><strong>架构流程：</strong></p>
                <ol>
                    <li>客户端请求首先到达网关</li>
                    <li>经过基础支撑层的初步处理</li>
                    <li>核心通信层进行协议解析和路由判断</li>
                    <li>安全保障层进行身份验证和授权检查</li>
                    <li>服务治理层进行服务发现和负载均衡</li>
                    <li>连接状态层管理连接和会话</li>
                    <li>运维与扩展层提供监控和扩展能力</li>
                    <li>请求被转发到相应的后端服务</li>
                </ol>
                <br>
                <p>这种分层架构使网关具备高可用、高性能、高安全性等特点，是微服务架构中不可或缺的核心组件。</p>
            `;
            
            detailPanel.style.display = 'block';
            detailPanel.scrollIntoView({ behavior: 'smooth' });
        }
    </script>
</body>
</html>